'use strict';
import React, {Component} from 'react';
import {
    View,
    Text,
    Animated,
    StyleSheet,
    Dimensions,
    ToastAndroid,
    Easing,
} from 'react-native';

let {width, height} = Dimensions.get("window");

const styles = StyleSheet.create({
    bold: {
        backgroundColor: "white",
        height: 10,
        width: 10,
        borderRadius: 5,
        position: 'absolute',
        top: height / 2,
    },
});

const colors = ["#90dac4", "#21b589", "#bce9db"];

export default class LoadingView extends Component {

    constructor(props) {
        super(props);
        let left = width / 2 - 15;
        this.state = {
            left: [new Animated.Value(left), new Animated.Value(left + 15), new Animated.Value(left + 30)],
        }
    }

    componentDidMount() {
        let n = 0;
        this.timer = setInterval(()=> {
            Animated.parallel([0, 1, 2].map((item) => {
                return Animated.timing(
                    this.state.left[item],
                    {
                        toValue: width / 2 + (15 * (((n + item ) % 3) - 1)),
                        duration: 300,
                        easing: Easing.linear
                    }
                )
            })).start();
            n++;
        }, 300);
    }

    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

    render() {
        return (
            <View style={{
                flex: 1,
                backgroundColor: '#F5F5F5',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <View style={{
                    backgroundColor: "white",
                    borderRadius: 10,
                    borderWidth: 2,
                    borderColor: '#F1F1F1',
                    position: 'absolute',
                    top: height / 2 - 35,
                    left: width / 2 - 35,
                    width: 80,
                    height: 80,
                }}/>
                {
                    [0, 1, 2].map((item) => {
                        return (
                            <Animated.View
                                key={"animated" + item }
                                style={[
                                    styles.bold,
                                    {
                                        backgroundColor: colors[item],
                                        left: this.state.left[item],
                                    }]}/>
                        )
                    })
                }
            </View>
        )
    }

}